<template>
  <div class="app-container">
    <el-row :gutter="20" class="searchAndNew">
      <el-col :span="16">
        <el-button
          type="primary"
          id="AddBtn"
          icon="el-icon-edit"
          size="medium"
          @click="showAddUser"
          >新增</el-button
        ></el-col
      >
      <el-col :span="4">
        <el-input
          placeholder="请输入内容"
          v-model="listQuery.query"
          @input="inputQueryChange()"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column prop="id" label="序号" width="180" align="center">
      </el-table-column>
      <el-table-column prop="name" label="用户名" width="180" align="center">
      </el-table-column>
      <el-table-column prop="nickName" label="名字" align="center">
      </el-table-column>
      <el-table-column prop="iphone" label="手机" align="center">
      </el-table-column>
      <el-table-column label="激活状态" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isActive"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeStatus($event, scope.row)"
            :active-value="100"
            active-text="激活"
            inactive-text="停用"
            :inactive-value="0"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="editUserBtn($event, scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="deleteUserBtn($event, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      class="pagestyle"
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />
    <el-dialog
      :title="titleType"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="userForm"
        :rules="rules"
        ref="userForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="id" prop="id" v-if='titleType==="编辑用户"' >
          <el-input v-model="userForm.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="name">
          <el-input v-model="userForm.name"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="userForm.nickName"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="iphone">
          <el-input v-model="userForm.iphone"></el-input>
        </el-form-item>
        <el-form-item label="激活状态" prop="isActive">
          <el-switch
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="100"
            :inactive-value="0"
            v-model="userForm.isActive"
          ></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('userForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('userForm')">重置</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList, addUser, editUser, deleteUser, updateUser } from "@/api/user";
import Pagination from "@/components/Pagination";

export default {
  components: { Pagination },
  data() {
    return {
      titleType: "新建用户",
      userForm: {
        id: "",
        name: "",
        nickName: "",
        iphone: "",
        createTime: "",
        isActive: "",
        flag:"1"
      },
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" }
        ],
        nickName: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { min: 3, max: 12, message: "长度在 3 到 12个字符", trigger: "blur" }
        ],
        iphone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "您输入的手机号不正确", trigger: "blur" }
        ]
      },
      dialogVisible: false,
      list: null,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        query: ""
      }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getList(this.listQuery).then(response => {
        console.log(response);
        this.list = response.data.items;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    inputQueryChange() {
      this.fetchData()
    },
    showAddUser() {
      this.titleType = "添加用户";
      this.dialogVisible = true;
      this.userForm = this.$options.data().userForm;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log("id",this.userForm.id);
          if (this.userForm.id == "") {
            addUser(this.userForm).then(res => {
              this.dialogVisible = false;

              this.$message({
                message: res.message,
                type: "success"
              });

              this.fetchData();
            });
          } else {
            updateUser(this.userForm).then(res => {
              this.$message({
                message: res.message,
                type: "success"
              })
                this.dialogVisible = false;
            })
          }
        } else {
          alert("subnit error!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    editUserBtn($event, params) {
     
      this.titleType = "编辑用户";
      this.dialogVisible = true;
     
      this.userForm = params;
    },
    changeStatus($event, row) {
      console.log(row);
      updateUser(row).then(res => {
        this.$message({
          message: res.message,
          type: "success"
        });
      });
    },
    updatestatus(data) {},
    deleteUserBtn($event, params) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
         
          deleteUser(params).then(res => {
            this.$message({
              message: res.message,
              type: "success"
            });
            this.fetchData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style  scoped>
.searchAndNew {
  margin-bottom: 10px;
  background-color: #eee;
  line-height: 40px;
  padding: 5px 0px;
  margin: 5px 0;
}
.pagestyle {
  margin: 10px 0;
  padding: 5px 0;
  background-color: #eee;
}
.demo-ruleForm {
  padding-right: 50px;
}
</style>
